<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="flex: 1; height: inherit;overflow-y: auto;">
                    <el-form ref="ruleFormRef" :model="state.agentData" label-width="280px">
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>运费设置</p>
                        </section>
                        <el-form-item label="代理运费设置：">
                            <el-radio-group v-model="state.agentData.agentFreightType">
                                <el-radio :label=0>沿用总部运费模板</el-radio>
                                <el-radio :label=1>代理自定义运费</el-radio>
                                <el-radio :label=2>代理线下收取，系统内不体现</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>代理订单库存设置</p>
                        </section>
                        <el-form-item label="总部库存不足时代理下单限制：">
                            <el-radio-group v-model="state.agentData.agentStockOrdersType">
                                <el-radio :label=0>代理不可下单</el-radio>
                                <el-radio :label=1>下单对象非总部时，可以下单</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="总部库存不足时代理代发限制：">
                            <el-radio-group v-model="state.agentData.agentStockIssuingType">
                                <el-radio :label=0>代理选中代发时不可转给总部</el-radio>
                                <el-radio :label=1>代理选中代发时可以转给总部</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>订单线下打款对象设置</p>
                        </section>
                     
                        <el-form-item label="代理的订单线下打款对象：">
                            <section style="display:block;width: 100%">
                                <el-radio-group v-model="state.agentData.agentOfflinePayObjectType" @change="changeType">
                                    <el-radio :label=0>付款给总部</el-radio>
                                    <el-radio :label=1>付款给下单对象</el-radio>
                                    <el-radio :label=2>单一设置</el-radio>
                                </el-radio-group>
                                <section v-if="state.agentData.agentOfflinePayObjectType == 2">
                                    <el-table :data="[{}]"  style="width: 100%" border>
                                        <el-table-column  v-for="(item, index) of state.agentLevelList" :key="index" :label="item.agentName">
                                            <template #default>
                                                <el-select v-model="state.agentData.agentOfflinePayValue[index].payObjectType" placeholder="请选择">
                                                    <el-option label="付款给总部" :value="0"> </el-option>
                                                    <el-option label="付款给下单对象" :value="1"> </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </section>
                            </section>
                        </el-form-item>
                    </el-form>
                </section>
                <section style="text-align: center; margin:10px 0;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </section>
            </el-card>
        </div>
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { couponAdd,couponInfo } from "/@/api/marketing";
import { configData } from '/@/api/common';
import { agentStockInfo,agentList, agentStockSave } from "/@/api/agent";
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router';
const ruleFormRef = ref<FormInstance>()
const state = reactive({
    agentLevelList: [] as Array<any>,
    agentData:{
        agentFreightType: 0, 
        agentStockOrdersType: 0,
        agentStockIssuingType: 0, 
        agentOfflinePayObjectType: 0,
        agentOfflinePayValue:[]
    },
})


// 代理线下打款对象切换
const changeType = (val:number) =>{
    if(val == 2){
        let agentOfflinePayValue = [] as Array<any>;
        state.agentLevelList.map((item:any,index:any)=>{
            agentOfflinePayValue.push({
                agentLevelId:item.agentLevelId,
                payObjectType:0,
            })
        })
        state.agentData.agentOfflinePayValue = JSON.parse(JSON.stringify(agentOfflinePayValue))
    }
}

// 页面加载时
onMounted(async ()  => {
    getAgentList()
    const { results } = await agentStockInfo();
    state.agentData = results
    console.log(results);
});

// 获取商品类型列表
const getAgentList = async () => {
	const { results } = await agentList();
	state.agentLevelList = results;
}


const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
            const { method } = await agentStockSave(state.agentData);
            if(method == 'success'){
                ElMessage.success('提交成功');
            }
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.el-form{
    flex:1;
    overflow-y: auto;
    position: relative;
}
.form-ele-size {
    width: 260px;
}

.line-title {
    font-size: 18px;
    padding: 8px 12px;
    background-color: #eceef0;
    border-radius: 6px;
    margin-bottom: 15px;
}

.selector-img {
    // width: 64px;
    // height: 64px;
    // border: 1px solid #ededed;
    // border-radius: 5px;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // &:hover {
    //     background-color: #f5f5f5;
    //     border: 1px solid #e4e3e3;
    // }
}
.typeBox{
    height: 65px;
    margin-right: 15px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    line-height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    span:first-child{
        font-weight: 600;
    }
    span:last-child{
        font-weight: 500;
        color: var(--el-color-info-light-3);
    }
}
.typeBoxSelected {
    border: 1px solid var(--el-color-primary);
    position: relative;
    .virtual_san{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 26px solid var(--el-color-primary);
        border-left: 26px solid transparent;
    }
    .virtual_dui{
        position: absolute;
        bottom: -2px;
        right: 2px;
        color: #fff;
        font-family: system-ui;
    }
}
</style>
